// @ts-nocheck
import React, { useEffect, useState } from 'react';
import { List, Mask } from 'antd-mobile';
import { connect, history } from 'umi';

// @ts-ignore
import ininters from '../../utlis/server.js';
import '../../utlis/fontcss/iconfont.css';
import './index.less';

function _layout(props: any) {
  console.log(props);

  let [sortlist, setsortlist] = useState([]);
  let [visible, setVisible] = useState(false);
  let [activeid, setactiveid] = useState('');
  let [dishslist, setdishslist] = useState([]);
  let [isshowicon, setisshowicon] = useState(JSON.parse(localStorage.getItem('isshowicon'))||false);
  let [shopcount, setshopcount] = useState(0);
  let [totprice, settotprice] = useState(0);
  let [maskitem, setmaskitem] = useState({});
  let getsortlist = async () => {
    let {
      data: { sorts },
    } = await ininters.get('/sorts');
    let seid = sorts.find((item: any) => {
      return item.soname == '热菜';
    });
   
    setactiveid(seid._id);
    setsortlist(sorts);
    gettypedish(seid._id);
  };
  let gettypedish = async (id: any) => {
    let { data } = await ininters.get(`/dish/${id}`);

    if (props.shopslist.length != 0) {
      props.shopslist.forEach((item: any) => {
        data.data.forEach((c: any) => {
          if (item._id == c._id) {
            c.num = item.num;
          }
        });
      });

      setdishslist(data.data);
    } else {
      setdishslist(data.data);
    }
  };
  let clickdis = async (e: any, item: any) => {
    dishslist.forEach((ceim: any) => {
      if (
        e.target.tagName == 'IMG' ||
        e.target.innerText == '+' ||
        e.target.innerText == '加入购物车'
      ) {
        if (ceim._id == item._id) {
          ceim.num++;
          props.dispatch({
            type: 'index/query',
            payload: {
              ita: { ...ceim },
            },
          });
        }
      } else if (e.target.innerText == '-') {
        if (ceim._id == item._id) {
          ceim.num--;
          props.dispatch({
            type: 'index/query',
            payload: {
              ita: { ...ceim },
            },
          });
        }
      } else {
        setVisible(true);
        setmaskitem(item);
      }
    });

    setdishslist([...dishslist]);
  };

  useEffect(() => {
    // props.dispatch({
    //   type: 'index/save',
    //   payload: {
    //     shopslist: dishslist,
    //   },
    // });
  }, [activeid]);
  useEffect(() => {
    let Tr = props.shopslist.every((item: any) => {
      if (item.num == 0) {
        return true;
      } else {
        return false;
      }
    });
    localStorage.setItem('isshowicon',JSON.stringify(Tr))
    setisshowicon(Tr);
    let num = 0;
    let price = 0;
    props.shopslist.forEach((item: any) => {
      num += item.num;
      price += item.num * item.price;
    });
    setshopcount(num);
    settotprice(price);
  }, [props.shopslist]);
  useEffect(() => {
    getsortlist();
  }, []);
  return (
    <div className="q1">
      <div className="qt1" style={{ display: isshowicon ? 'none' : '' }}>
        <div className="qtt1">
          <span
            className="iconfont icon-canting icon1"
            style={{ display: isshowicon ? 'none' : '' }}
          ></span>
          <span
            style={{
              display: isshowicon ? 'none' : '',
              margin: '0 0 0 30px',
              fontSize: '30px',
              color: 'red',
              fontWeight: 'border',
            }}
            className="naini"
          >
            ${totprice.toFixed(2)}
          </span>
          <label
            className="fuqu1"
            style={{ display: isshowicon ? 'none' : '' }}
          >
            {shopcount}
          </label>
        </div>
        <div
          className="qtt2"
          onClick={() => {
            history.push('/order');
          }}
        >
          去结算
        </div>
      </div>
      <div className="t1">
        <div className="ta1">
          <List header="">
            {sortlist.map((item: any) => {
              return (
                <List.Item
                  key={item._id}
                  onClick={(e) => {
                    setactiveid(item._id);
                    gettypedish(item._id);
                  }}
                  arrow={false}
                  clickable={false}
                  style={{ color: activeid == item._id ? 'red' : '' }}
                >
                  {item.soname}
                </List.Item>
              );
            })}
          </List>
        </div>
      </div>
      <div className="t2">
        <ul className="dishslist">
          {dishslist.map((item: any) => {
            return (
              <li
                key={item._id}
                className="slide-in-fwd-right"
                onClick={(e) => {
                  clickdis(e, item);
                }}
              >
                <img src={item.pic} alt="" />
                <label className="disack">
                  <h2>{item.dname}</h2>
                  <span>{item.dname}</span>
                  <span style={{ color: 'red' }}>
                    <b>${item.price.toFixed(2)}</b>
                  </span>
                </label>
                <label
                  className="btn"
                  style={{ display: item.num == 0 ? 'none' : '' }}
                >
                  <button className="btn-">-</button>
                  <input type="text" value={item.num} onChange={() => {}} />
                  <button className="btns-">+</button>
                </label>
              </li>
            );
          })}
        </ul>

        <div className="ta2">{props.children}</div>
      </div>
      <Mask visible={visible} onMaskClick={() => setVisible(false)}>
        <div className="maskitem">
          <div className="imgbox">
            <img src={(maskitem as any).pic} alt="" />
          </div>
          <h2>{(maskitem as any).dname}</h2>
          <div className="maskitemfoot">
            <span>
              <b>$</b>
              {(maskitem as any).price}
            </span>
            <div className="maskftbt_box">
              <div
                className="maskftbtn"
                style={{ display: maskitem.num == 0 ? '' : 'none' }}
              >
                <button
                  className="btn1"
                  onClick={(e) => {
                    clickdis(e, maskitem);
                  }}
                >
                  加入购物车
                </button>
              </div>
              <div
                className="addcebtn"
                style={{ display: maskitem.num != 0 ? '' : 'none' }}
              >
                <button
                  onClick={(e) => {
                    clickdis(e, maskitem);
                  }}
                >
                  -
                </button>
                <input
                  type="text"
                  value={(maskitem as any).num}
                  onChange={() => {}}
                />
                <button
                  onClick={(e) => {
                    clickdis(e, maskitem);
                  }}
                >
                  +
                </button>
              </div>
            </div>
          </div>
        </div>
      </Mask>
    </div>
  );
}
export default connect((state) => {
  return {
    // @ts-ignore
    shopslist: state.index.shopslist,
  };
})(_layout);
